<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>采购对账</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="../../../component/elementUI/index.css" />
  <link rel="stylesheet" href="../../../style/wangeditor.css" />
  <link rel="stylesheet" href="../../../style/index.css" />
  <style>
    .el-input.is-disabled .el-input__inner {
      color: #000;
      background-color: #fff;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <el-form :inline="true" :form="form">
      <el-form-item>
        <el-button type="primary" @click="Add">商家对账申请</el-button>
      </el-form-item>
      <el-form-item>
        <el-input v-model.trim="form.Purchase_Order_SerialNumber" clearable placeholder="请输入对账单名称" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.Supplier_SerialNumber" placeholder="请输入供应商名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker prefix-icon="el-icon-date" v-model="form.Purchase_Date" clearable type="datetimerange"
          value-format="yyyy-MM-dd" format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <!-- <el-select
          v-model.trim="form.Supplier_SerialNumber"
          clearable
          style="width: 5%"
          placeholder="全部"
        >
          <el-option
            v-for="item in Supplier"
            :key="item.Supplier_SerialNumber"
            :label="item.Supplier_Name"
            :value="item.Supplier_SerialNumber"
          ></el-option>
        </el-select> -->
      <el-form-item>
        <el-button type="primary" @click="onSerach">查询</el-button>
      </el-form-item>
      <el-form-item>
        <yl-button type="success" :data="ExportData" :loading="loading" @click="Export(form)">采购订单导出</yl-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="form.Row_Status" type="card" @tab-click="onSerach">
      <el-tab-pane label="全部" name="-"></el-tab-pane>
      <el-tab-pane label="审核中" name="0"></el-tab-pane>
      <el-tab-pane label="已通过" name="1"></el-tab-pane>
      <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
    </el-tabs>
    <el-table :data="tableData.slice((form.page-1)*form.limit,form.page*form.limit)" stripe border height="calc(100vh - 210px)"  style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
      <el-table-column align="center" prop="Purchase_Name" width="300" show-overflow-tooltip
        label="对账单名称"></el-table-column>
      <el-table-column align="center" prop="Purchase_Order_SerialNumber" width="300" show-overflow-tooltip
        label="对账单编号"></el-table-column>
      <!-- <el-table-column
          align="center"
          prop="Supplier_Name"
          width="150"
          show-overflow-tooltip
          label="供应商"
        ></el-table-column> -->
      <el-table-column align="center" prop="Purchase_Date" width="300" show-overflow-tooltip
        label="日期"></el-table-column>
      <el-table-column align="center" prop="ID_Name" width="300" show-overflow-tooltip label="对账人"></el-table-column>
      <!-- <el-table-column
          align="center"
          prop="name"
          width="300"
          show-overflow-tooltip
          label="下单地址"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="name"
          width="300"
          show-overflow-tooltip
          label="下单手机号"
        ></el-table-column> -->
      <!-- <el-table-column
          align="center"
          prop="name"
          width="300"
          show-overflow-tooltip
          label="商品名称"
        ></el-table-column> -->
      <!-- <el-table-column
          align="center"
          prop="name"
          width="300"
          show-overflow-tooltip
          label="数量"
        ></el-table-column> -->
      <!-- <el-table-column
          align="center"
          prop="name"
          width="300"
          show-overflow-tooltip
          label="一件代发单价（元）"
        ></el-table-column> -->
      <el-table-column align="center" prop="Purchase_Amount01" width="300" show-overflow-tooltip label="一件代发总价（元）">
        <template v-slot="{row}">
          {{thousands(row.Purchase_Amount01)}}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="Purchase_Amount" width="300" show-overflow-tooltip
        label="实际对账金额（元）"></el-table-column>
      <!-- <el-table-column
          align="center"
          prop="Receipt_Quantity"
          width="300"
          show-overflow-tooltip
          label="销售总价"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="name"
          width="300"
          show-overflow-tooltip
          label="总利润"
        >
          <template slot-scope="scope">
            {{ scope.row.Receipt_Quantity - scope.row.Purchase_Amount}}
        
          </template>
        </el-table-column> -->
      <!-- <el-table-column
          align="center"
          prop="name"
          width="300"
          show-overflow-tooltip
          label="利润率（%）"
        >
          <template slot-scope="scope">
            {{ (formatRatio(scope.row.Receipt_Quantity,
            scope.row.Purchase_Amount))}}
        
          </template>
        </el-table-column> -->
      <!-- <el-table-column align="center" prop="name" width="300" show-overflow-tooltip label="发票号"></el-table-column> -->
      <!-- <el-table-column
          v-if="!isSupplier"
          align="center"
          prop="Amount"
          width="120"
          show-overflow-tooltip
          label="销售金额"
        >
          <template v-slot="{row}"> {{thousands(row.Amount)}} </template>
        </el-table-column> -->

      <!-- <el-table-column
          align="center"
          prop="Paid_Amount"
          width="120"
          show-overflow-tooltip
          label="已付金额"
        >
          <template v-slot="{row}"> {{thousands(row.Paid_Amount)}} </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="120"
          show-overflow-tooltip
          label="未付金额"
        >
          <template v-slot="{row}">
            <span
              :style="{color:accSub(row.Purchase_Amount,row.Paid_Amount)==0?'':'#F56C6C'}"
              >{{thousands(accSub(row.Purchase_Amount,row.Paid_Amount))}}</span
            >
          </template>
        </el-table-column> -->

      <el-table-column align="center" width="120" show-overflow-tooltip label="审核状态">
        <template v-slot="{row}">
          {{row.Row_Status=='99'?'审核中':row.Row_Status=='88'?'已拒绝':'已通过'}}
        </template>
      </el-table-column>
      <el-table-column prop="Row_Status.charAt(1)" label="发票状态" width="120"
        :filters="[{ text: '未上传发票', value: '0' }, { text: '已上传发票', value: '1' }]" :filter-method="filterTag"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.Row_Status!='99'" :type="scope.row.Row_Status=='99'?'warning':scope.row.Row_Status.charAt(1)=='0'?'':'success'" disable-transitions>
            {{scope.row.Row_Status.charAt(1)=='0'?'未上传发票':'已上传发票'}}
          </el-tag>
        </template>
      </el-table-column>

      <!-- <el-table-column align="center" width="120" label="发票状态">
          <template v-slot="{row}">
            <el-tag :type="row.Row_Status.charAt(1)=='0'?'':'success'"
              >{{row.Row_Status.charAt(1)=='0'?'未上传发票':row.Row_Status.charAt(1)=='1'?'已上传发票':''}}</el-tag
            >
          </template>
        </el-table-column> -->

      <el-table-column prop="Row_Status" label="打款状态" width="100"
        :filters="[{text: '待审核', value: '99'},{ text: '已付款', value: '1' }, { text: '未付款', value: '0' }]"
        :filter-method="filterTag1" filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.Row_Status!='99'"  :type="scope.row.Row_Status=='0'? 'warning' : scope.row.Row_Status=='99'  ? 'danger' : 'success'"
            disable-transitions>{{(scope.row.Row_Status == 0 ? '未付款' : scope.row.Row_Status ==
            99 ? '待审核' : '已付款' )}}</el-tag>
        </template>
      </el-table-column>

      <!-- <el-table-column align="center" width="100" label="打款状态">
          <template v-slot="{row}">
            <el-tag
              :type="row.Row_Status.charAt(0)=='0'?'':row.Row_Status.charAt(0)=='1'?'warning':'success'"
              >{{Type(row.Row_Status)}}</el-tag
            >
          </template>
        </el-table-column> -->

      <el-table-column align="center" fixed="right" prop="Row_Status" width="180" label="操作">
        <template v-slot="{row}">
          <el-dropdown v-if="row.Row_Status=='99'&&!isSupplier" size="small" trigger="click"
            @command="handle($event,row)">
            <el-button size="small" type="primary">
              审核<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="true">通过</el-dropdown-item>
              <el-dropdown-item command="false">拒绝</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <template v-else>
            <el-button v-if="!isSupplier" :disabled="parseFloat(row.Purchase_Amount)==parseFloat(row.Paid_Amount)"
              :type="parseFloat(row.Purchase_Amount)==parseFloat(row.Paid_Amount)?'info':'success'" size="small"
              @click="Edit(row)">付款</el-button>
            <el-dropdown size="small" trigger="click">
              <el-button size="small" type="primary">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item style="margin-bottom: 5px">
                  <el-button type="primary" @click="Show(row)" size="small">详情查看</el-button>
                </el-dropdown-item>
                <el-dropdown-item v-if="row.Row_Status!='99'" style="margin-bottom: 5px">
                  <el-button :type="row.Row_Status.charAt(0)=='2'?'success':'success'" @click="Invoice(row)"
                    size="small">上传发票</el-button>
                </el-dropdown-item>
                <!-- <el-dropdown-item v-if="row.Row_Status!='99'" style="margin-bottom: 5px">
                  <yl-detail type="danger" :data="ExportDetailData" @click="ExportDetail(row)">导出明细</yl-detail>
                </el-dropdown-item> -->
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 5px" background @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[10 ,20, 30, 50, 100]"
      :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
    </el-pagination>
    <show-detail :visible.sync="dialogVisible" :data="Purchase_Order"></show-detail>
    <edit :visible.sync="dialogEditVisible" :data="Purchase_Order" @success="getList(form)"></edit>
    <invoice :visible.sync="dialogInvoiceVisible" :data="Purchase_Order" @success="getList(form)"></invoice>
  </div>
  <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
  <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
  <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
  <script type="text/javascript" src="../../../utils/vue.min.js"></script>
  <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
  <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
  <script type="text/javascript" src="../../../component/component.js"></script>
  <script type="text/javascript" src="../../../utils/FileSaver.min.js"></script>
  <script type="text/javascript" src="../../../utils/FileSaver.js"></script>
  <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
  <script type="text/javascript" src="../../../utils/xlsx.core.min.js"></script>
  <script type="text/javascript" src="../../../config/config.js"></script>
  <script type="text/javascript" src="../../../utils/compressor.js"></script>
  <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
  <script type="text/javascript" src="../../../utils/utils.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</body>

</html>